<template>
	<view class="product-item" :data-proditem="prodItem" @click.stop="prodItemClick">
		<image mode="aspectFill" class="product-item__pic" :src="imageSrc" />
		<view class="product-item__info">
			<view class="product-item__head">
				<text class="product-item__title">{{prodItem.Name}}</text>
				<view class="product-item__tag" v-if="prodItem.ShortLabel">
					<text>{{prodItem.ShortLabel}}</text>
				</view>
			</view>
			<text class="product-item__content">
				{{prodItem.ProductNumber}}
			</text>
			<view class="product-item__footer">
				<text class="product-item__price">￥{{prodItem.Price}}</text>
				<view class="product-item__fitting" :data-prodnum="prodItem.Name" @click.stop="navigationPart">配件</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		props: {
			prodItem:{
				type: Object,
				default(){
					return {};
				}
			},
			imageSrc: {
				type: String,
				default () {
					return "";
				}
			},
			prodNumber: {
				type: String,
				default () {
					return "";
				}
			},
			prodName: {
				type: String,
				default () {
					return "";
				}
			},
			prodPrice: {
				type: Number,
				default () {
					return 0;
				}
			},
			shortLabel: {
				type: String,
				default () {
					return ""
				}
			}
		},
		beforeMount() {
			//console.log(this.imageSrc);
		},
		methods: {
			prodItemClick(e){
				//debugger;
				let prodItem = e.currentTarget.dataset.proditem;
				this.$emit("prodItemClick", {
					prodItem: prodItem,
					imageSrc:this.imageSrc
				})
			},
			navigationPart(e) {
				let prodNum = e.currentTarget.dataset.prodnum;
				//console.log(e);
				this.$emit("navigationPart", {
					prodNum: prodNum
				})
			}
		}

	}
</script>
<style lang="scss">
	@import './index.scss';
</style>
